<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
                          <a-col :md="8" :sm="24">
                          <a-form-item label="客户号" prop="customerNo">
                          <a-input v-model="queryParam.customerNo" placeholder="请输入客户号" allow-clear/>
                          </a-form-item>
                          </a-col>
                          <a-col :md="8" :sm="24">
                          <a-form-item label="客户名称" prop="customerName">
                          <a-input v-model="queryParam.customerName" placeholder="请输入客户名称" allow-clear/>
                          </a-form-item>
                          </a-col>
                      <template v-if="advanced">
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户来源" prop="customerSource">
                            <a-input v-model="queryParam.customerSource" placeholder="请输入客户来源" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户电话" prop="customerPhone">
                            <a-input v-model="queryParam.customerPhone" placeholder="请输入客户电话" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户手机号" prop="customerMobile">
                            <a-input v-model="queryParam.customerMobile" placeholder="请输入客户手机号" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户所属行业" prop="customerIndustry">
                            <a-input v-model="queryParam.customerIndustry" placeholder="请输入客户所属行业" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户级别" prop="customerLevel">
                            <a-input v-model="queryParam.customerLevel" placeholder="请输入客户级别" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户最后跟进时间" prop="customerLastFollowTime">
                            <a-date-picker style="width: 100%" v-model="queryParam.customerLastFollowTime" format="YYYY-MM-DD HH:mm:ss" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="客户地址" prop="address">
                            <a-input v-model="queryParam.address" placeholder="请输入客户地址" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="经度" prop="lng">
                            <a-input v-model="queryParam.lng" placeholder="请输入经度" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="维度" prop="lat">
                            <a-input v-model="queryParam.lat" placeholder="请输入维度" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="网站" prop="website">
                            <a-input v-model="queryParam.website" placeholder="请输入网站" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="是否删除" prop="ifDel">
                            <a-input v-model="queryParam.ifDel" placeholder="请输入是否删除" allow-clear/>
                            </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                            <a-form-item label="创建人id" prop="createById">
                            <a-input v-model="queryParam.createById" placeholder="请输入创建人id" allow-clear/>
                            </a-form-item>
                            </a-col>
              </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                    <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 操作 -->
      <div class="table-operations">
            <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['customer:info:add']">
              <a-icon type="plus" />新增
            </a-button>
            <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['customer:info:edit']">
              <a-icon type="edit" />修改
            </a-button>
        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['customer:info:remove']">
          <a-icon type="delete" />删除
        </a-button>
        <a-button type="primary" @click="handleExport" v-hasPermi="['customer:info:export']">
          <a-icon type="download" />导出
        </a-button>
        <table-setting
            :style="{float: 'right'}"
            :table-size.sync="tableSize"
            v-model="columns"
            :refresh-loading="loading"
            @refresh="getList" />
      </div>
          <!-- 增加修改 -->
          <create-form
              ref="createForm"
              @ok="getList"
          />
      <!-- 数据展示 -->
      <a-table
          :loading="loading"
          :size="tableSize"
          rowKey="customerId"
          :columns="columns"
          :data-source="list"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :pagination="false"
          :bordered="tableBordered"
      >
                <span slot="customerLastFollowTime" slot-scope="text, record">
          {{ parseTime(record.customerLastFollowTime) }}
        </span>
        <span slot="operation" slot-scope="text, record">
  <a-divider type="vertical" v-hasPermi="['customer:info:edit']" />
          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['customer:info:edit']">
            <a-icon type="edit" />修改
          </a>
          <a-divider type="vertical" v-hasPermi="['customer:info:remove']" />
          <a @click="handleDelete(record)" v-hasPermi="['customer:info:remove']">
            <a-icon type="delete" />删除
          </a>
        </span>
      </a-table>
          <!-- 分页 -->
          <a-pagination
              class="ant-table-pagination"
              show-size-changer
              show-quick-jumper
              :current="queryParam.pageNum"
              :total="total"
              :page-size="queryParam.pageSize"
              :showTotal="total => `共 ${total} 条`"
              @showSizeChange="onShowSizeChange"
              @change="changeSize"
          />
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { listInfo, delInfo } from '@/api/customer/info'
  import CreateForm from './modules/CreateForm'
  import { tableMixin } from '@/store/table-mixin'

  export default {
    name: 'Info',
    components: {
          CreateForm
    },
    mixins: [tableMixin],
    data () {
      return {
        list: [],
        selectedRowKeys: [],
        selectedRows: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        ids: [],
        loading: false,
        total: 0,
        // 查询参数
        queryParam: {
                        customerNo: null,
                        customerName: null,
                        customerSource: null,
                        customerPhone: null,
                        customerMobile: null,
                        customerDealStatus: null,
                        customerStatus: null,
                        customerIndustry: null,
                        customerLevel: null,
                        customerLastFollowTime: null,
                        customerLastFollowRecord: null,
                        address: null,
                        lng: null,
                        lat: null,
                        remarks: null,
                        website: null,
                        ifDel: null,
                        createById: null,
          pageNum: 1,
          pageSize: 10
        },
        columns: [
                  {
                    title: '客户id',
                    dataIndex: 'customerId',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户号',
                    dataIndex: 'customerNo',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户名称',
                    dataIndex: 'customerName',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户来源',
                    dataIndex: 'customerSource',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户电话',
                    dataIndex: 'customerPhone',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户手机号',
                    dataIndex: 'customerMobile',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户成交状态',
                    dataIndex: 'customerDealStatus',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户状态',
                    dataIndex: 'customerStatus',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户所属行业',
                    dataIndex: 'customerIndustry',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户级别',
                    dataIndex: 'customerLevel',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户最后跟进时间',
                    dataIndex: 'customerLastFollowTime',
                    scopedSlots: { customRender: 'customerLastFollowTime' },
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户最后跟进记录',
                    dataIndex: 'customerLastFollowRecord',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '客户地址',
                    dataIndex: 'address',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '经度',
                    dataIndex: 'lng',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '维度',
                    dataIndex: 'lat',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '备注',
                    dataIndex: 'remarks',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '网站',
                    dataIndex: 'website',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '是否删除',
                    dataIndex: 'ifDel',
                    ellipsis: true,
                    align: 'center'
                  },
                  {
                    title: '创建人id',
                    dataIndex: 'createById',
                    ellipsis: true,
                    align: 'center'
                  },
          {
            title: '操作',
            dataIndex: 'operation',
            width: '18%',
            scopedSlots: { customRender: 'operation' },
            align: 'center'
          }
        ]
      }
    },
    filters: {
    },
    created () {
      this.getList()
    },
    computed: {
    },
    watch: {
    },
    methods: {
      /** 查询客户信息管理列表 */
      getList () {
        this.loading = true
        listInfo(this.queryParam).then(response => {
              this.list = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery () {
        this.queryParam.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery () {
        this.queryParam = {
                            customerNo: undefined,
                            customerName: undefined,
                            customerSource: undefined,
                            customerPhone: undefined,
                            customerMobile: undefined,
                            customerDealStatus: undefined,
                            customerStatus: undefined,
                            customerIndustry: undefined,
                            customerLevel: undefined,
                            customerLastFollowTime: undefined,
                            customerLastFollowRecord: undefined,
                            address: undefined,
                            lng: undefined,
                            lat: undefined,
                            remarks: undefined,
                            website: undefined,
                            ifDel: undefined,
                            createById: undefined,
          pageNum: 1,
          pageSize: 10
        }
        this.handleQuery()
      },
      onShowSizeChange (current, pageSize) {
        this.queryParam.pageSize = pageSize
        this.getList()
      },
      changeSize (current, pageSize) {
        this.queryParam.pageNum = current
        this.queryParam.pageSize = pageSize
        this.getList()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        this.ids = this.selectedRows.map(item => item.customerId)
        this.single = selectedRowKeys.length !== 1
        this.multiple = !selectedRowKeys.length
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      /** 删除按钮操作 */
      handleDelete (row) {
        var that = this
        const customerIds = row.customerId || this.ids
        this.$confirm({
          title: '确认删除所选中数据?',
          content: '当前选中编号为' + customerIds + '的数据',
          onOk () {
            return delInfo(customerIds)
                .then(() => {
                  that.onSelectChange([], [])
                  that.getList()
                  that.$message.success(
                      '删除成功',
                  3
                  )
                })
          },
          onCancel () {}
        })
      },
      /** 导出按钮操作 */
      handleExport () {
        var that = this
        this.$confirm({
          title: '是否确认导出?',
          content: '此操作将导出当前条件下所有数据而非选中数据',
          onOk () {
            that.download('customer/info/export', {
              ...that.queryParam
            }, `info_${new Date().getTime()}.xlsx`)
          },
          onCancel () {}
        })
      }
    }
  }
</script>
